<template>
	<view>
		<!--detail.wxml-->
		<view class='info'>
		  <view class='info-item'>
		    <text class='text'>还款总额(万)</text>
		    <text class='value'>{{total}}</text>
		  </view>
		  <view class='info-item'>
		    <text class='text'>利息总额(万)</text>
		    <text class='value'>{{total_interest}}</text>
		  </view>
		  <view class='info-item'>
		    <text class='text'>贷款总额(万)</text>
		    <text class='value'>{{total_principal}}</text>
		  </view>
		  <view class='info-item'>
		    <text class='text'>贷款月数</text>
		    <text class='value'>{{total_month}}</text>
		  </view>
		</view>
		<view class='table'>
		  <view class='tr'>
		    <view class='td'>月份</view>
		    <view class='td'>本金/月</view>
		    <view class='td'>利息/月</view>
		    <view class='td'>剩余金额</view>
		  </view>
		</view>
		<view v-for="(item, i) in table">
		  <view class='table-title'>第 {{i + 1}} 年</view>
		  <view class='table'>
		    <view v-for="(itemj, j) in item" >
		      <view class='tr'>
		        <view class='td'>{{j + 1}}月</view>
		        <view class='td'>{{itemj.principal}}</view>
		        <view class='td'>{{itemj.interest}}</view>
		        <view class='td'>{{itemj.remainder}}</view>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 option: {
				      flag: 0,
				      year: 0,
				      money_c: 0,
				      money_p: 0,
				      commercial: 0,
				      providentFund: 0
				},
				table: [],
				//还款总额
				total: 0,
				//利息总额
				total_interest: 0,
				//贷款总额
				total_principal: 0,
				//贷款月数
				total_month: 0,
			};
		},
		 /**
		   * 生命周期函数--监听页面加载
		   */
		onLoad: function (options) {
		    var that = this;
			this.option = options
			that.loadData();
		},
		methods: {
			loadData: function () {
			    var that = this;
			    var flag = that.option.flag;
			    var year = that.option.year;
			    var money_c = parseInt(that.option.money_c || 0);
			    var money_p = parseInt(that.option.money_p || 0);
			    var commercial = that.option.commercial || 0;
			    var providentFund = that.option.providentFund || 0;
			    var result = {};
			    if (flag == 0) {              //等额本息
			      var result1, result2;
			      result1 = result2 = {
			        payment: 0,
			        total: 0,
			        interest: 0
			      }
			      if (money_c != 0) {
			        result1 = that.getResult(year, commercial, money_c);
			      }
			      if (money_p != 0) {
			        result2 = that.getResult(year, providentFund, money_p);
			      }
			      result = {
			        payment: result1.payment + result2.payment,
			        total: result1.total + result2.total,
			        interest: result1.interest + result2.interest
			      }
			
			      var table = [];
			      var t1 = money_c * 10000;
			      var t2 = money_p * 10000;
			      var t = result.total;
			      var month_commercial = commercial / 100 / 12;
			      var month_providentFund = providentFund / 100 / 12;
			
			      for (var i = 0; i < year; i++) {
			        var arr = []
			        for (var j = 0; j < 12; j++) {
			          var interest = t1 * month_commercial + t2 * month_providentFund;
			          var principal = result1.payment + result2.payment - interest;
			          var remainder = t - result1.payment - result2.payment;
			          var item = {};
			          //应还利息
			          item.interest = interest.toFixed(2);
			          //应还本金
			          item.principal = principal.toFixed(2);
			          //剩余金额
			          item.remainder = Math.abs(remainder).toFixed(2);
			          t1 = t1 - (result1.payment - t1 * month_commercial);
			          t2 = t2 - (result2.payment - t2 * month_providentFund);
			          t = remainder;
			          arr.push(item);
			        }
			        table.push(arr);
			      }
					this.table = table
			      
			
			    } else if (flag == 1) {       //等额本金
			      var result1, result2;
			      result1 = result2 = {
			        payment: 0,
			        total: 0,
			        interest: 0
			      }
			      if (money_c != 0) {
			        result1 = that.getResult1(year, commercial, money_c);
			      }
			      if (money_p != 0) {
			        result2 = that.getResult1(year, providentFund, money_p);
			      }
			      result = {
			        payment: result1.payment + result2.payment,
			        decline: result1.decline + result2.decline,
			        total: result1.total + result2.total,
			        interest: result1.interest + result2.interest
			      }
			
			      var table = [];
			      var t1 = money_c * 10000;
			      var t2 = money_p * 10000;
			      var t = result.total;
			      var principal1 = 0;
			      var principal2 = 0;
			      var month_commercial = commercial / 100 / 12;
			      var month_providentFund = providentFund / 100 / 12;
			
			      for (var i = 0; i < year; i++) {
			        var arr = []
			        for (var j = 0; j < 12; j++) {
			          var principal = money_c * 10000 / year / 12 + money_p * 10000 / year / 12;
			          var interest = t1 * month_commercial + t2 * month_providentFund;
			          var remainder = t - principal - interest;
			          var item = {};
			          //应还利息
			          item.interest = interest.toFixed(2);
			          //应还本金
			          item.principal = principal.toFixed(2);
			          //剩余金额
			          item.remainder = Math.abs(remainder).toFixed(2);
			          t1 = t1 - money_c * 10000 / year / 12;
			          t2 = t2 - money_p * 10000 / year / 12;
			          principal1 += money_c * 10000 / year / 12;
			          principal2 += money_p * 10000 / year / 12;
			          t = remainder;
			          arr.push(item);
			        }
			        table.push(arr);
			      }
			
			      this.table = table
			
			    }
				that.total= (result.total / 10000).toFixed(2);
				that.total_interest= (result.total / 10000 - money_c - money_p).toFixed(2);
				that.total_principal= money_c + money_p;
				that.total_month = year * 12;
			    
			},
			  //等额本息公式
			getResult: function (year, rate, money) {
			    //还款月数
			    var months = year * 12;
			    //月利率
			    var month_rate = rate / 100 / 12;
			    //月供
			    var payment = money * 10000 * month_rate * Math.pow(1 + month_rate, months) / (Math.pow(1 + month_rate, months) - 1);
			    var total = payment * months;
			    //总利息
			    var interest = total - money * 10000;
			    return {
			      payment: payment,
			      total: total,
			      interest: interest,
			    }
			},
			  //等额本金公式
			getResult1: function (year, rate, money) {
			    //贷款本金
			    var p = money * 10000;
			    //还款月数
			    var months = year * 12;
			    //月利率
			    var month_rate = rate / 100 / 12;
			    //月供
			    var payment = (p / months) + p * month_rate;
			    //月供递减
			    var decline = p / months * month_rate;
			    //总利息
			    var interest = ((p / months + p * month_rate) + p / months * (1 + month_rate)) / 2 * months - p;
			    //还款总额
			    var total = interest + p;
			    return {
			      payment: payment,
			      decline: decline,
			      total: total,
			      interest: interest
			    }
			},
		}
	}
</script>

<style lang="less">
/**detail.wxss**/

page {
  background: #f8f8ff;
}

.info {
  display: flex;
  padding: 30rpx;
   background-image: linear-gradient(135deg, #F44336 10%, #FF9800 100%);
}

.info-item {
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
  color: #fff;
  height: 90rpx;
  justify-content: space-between;
  box-sizing: border-box;
}

.info-item:not(:last-child) {
  border-right: 1rpx solid #fff;
}

.info-item .text {
  font-size: 26rpx;
  text-align: center;
}

.info-item .value {
  font-size: 34rpx;
  text-align: center;
}

.table {
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
}

.table:last-child {
  margin-bottom: 60rpx;
}

.table-title {
  font-size: 28rpx;
  line-height: 50rpx;
  color: #aaa;
  text-indent: 1em;
}

.tr {
  display: flex;
  justify-content: center;
}

.th {
  background: #f8d800;
  color: #fff;
}

.th, .td {
  flex-basis: 32%;
  text-align: center;
  line-height: 64rpx;
  box-sizing: border-box;
}

.td {
  border: 1rpx solid #e5e5e5;
  border-top: 0;
  border-right: 0;
  color: #333;
  background: #fff;
}

.tr .td:last-child {
  border-right: 1rpx solid #e5e5e5;
}

</style>
